<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>inputEx - 'inputEg' Example Form Utility Demo</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css"
          href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts/reset-fonts.css&2.6.0/build/container/assets/skins/sam/container.css">
    <!--<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">-->
    <link type='text/css' rel='stylesheet' href='http://inputex.googlecode.com/svn/trunk/css/inputEx.css'/>
    <link rel="stylesheet" type="text/css" href="http://inputex.googlecode.com/svn/trunk/examples/css/inputEg.css"/>

    <!-- YUI Library -->
    <script type="text/javascript"
            src="http://yui.yahooapis.com/combo?3.0.0pr1/build/yui/yui-min.js&3.0.0pr1/build/oop/oop-min.js&3.0.0pr1/build/event/event-min.js&3.0.0pr1/build/attribute/attribute-min.js&3.0.0pr1/build/base/base-min.js&3.0.0pr1/build/dom/dom-min.js&3.0.0pr1/build/node/node-min.js&3.0.0pr1/build/io/io-min.js&3.0.0pr1/build/json/json-min.js&3.0.0pr1/build/queue/queue-min.js&3.0.0pr1/build/cookie/cookie-min.js"></script>
    <script type="text/javascript"
            src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/container/container-min.js"></script>
    <script src="http://inputex.googlecode.com/svn/trunk/js/inputeg.js" type='text/javascript'></script>
    <script src="http://inputex.googlecode.com/svn/trunk/js/inputex.js" type='text/javascript'></script>
    <script src="http://inputex.googlecode.com/svn/trunk/js/Field.js" type='text/javascript'></script>
    <script src="http://inputex.googlecode.com/svn/trunk/js/fields/StringField.js" type='text/javascript'></script>
    <script src="http://inputex.googlecode.com/svn/trunk/js/fields/RadioField.js" type='text/javascript'></script>
    <script src="http://inputex.googlecode.com/svn/trunk/js/fields/RadioButton.js" type='text/javascript'></script>
</head>

<body>

<p class='demoTitle'>inputEx - 'inputEg' Example Form Utility</p>


<!-- BEGIN OF EXAMPLE 1 -->
<div id="example1">
    <div class="hd">inputEg - normal example rendering</div>
    <div class="desc">This example a field is rendered normally. There are three visual components
        <ol>
            <li>1. Demo result - either display the rendered Form/Field, or an error message in red</li>
            <li>2. JavaScript - the demo JavaScript that render the demo result</li>
            <li>3. HTML - if the demo support render() and renderDOM(), inputEg will try to render the DOM and print out
                the result, then clear the demo area and do a real render()
            </li>
        </ol>
    </div>
</div>

<script type="text/javascript">

    YUI().use('base', 'inputEg', function(Y) {
        var example = new Y.inputEg({el:'example1'});
        example.renderDOM();
        var demoCell = example.get('demoCell');
        var demoScript = "new YAHOO.inputEx.RadioButton({label: 'Where did you learn about inputEx ?', name: 'example1', choices: ['Ajaxian','YUI blog','other'], parentEl:'" + demoCell.get('id') + "'});" // must be a String
        example.set('demoScript', demoScript);
        example.render();
    })
</script>
<!-- END OF EXAMPLE 1 -->


<!-- BEGIN OF EXAMPLE 2 -->
<div id="example2">
    <div class="hd">inputEg - error in demo code</div>
    <div class="desc">This example shows that error message will be displayed in red instead of the rendered content
        when there is error
    </div>
</div>
<script type="text/javascript">

    YUI().use('base', 'inputEg', function(Y) {
        var example = new Y.inputEg({el:'example2'});
        var demoCell = example.get('demoCell');
        var demoScript = "new YAHOO.inputEx.RadioButton1({label: 'Where did you learn about inputEx ?', name: 'example1', choices: ['Ajaxian','YUI blog','other'], parentEl:'" + demoCell.get('id') + "'});" // must be a String
        example.set('demoScript', demoScript);
        example.render();
    })
</script>
<!-- END OF EXAMPLE 2 -->

<!--
<script type="text/javascript">
    dp.SyntaxHighlighter.HighlightAll('code');
</script>
-->

</body>
</html>